<template>
  <div class="wraps">
    <div :style="{height:item.height + 'px',background:item.background,left:item.left+'px',top:item.top+'px'}" 
    v-for="item in waterList" class="items">1
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted} from "vue"
import { reactive } from "./reactive";
const props = defineProps<{
  list: any[]
}>()

const waterList = reactive<any[]>([]);
const heightList:number[] = []
const init = ()=>{
  const width = 130;
  //获取可视区域高度
  let x = document.body.clientWidth;
  const column = Math.floor(x / width);
  console.log(column);
  for (let i = 0; i < props.list.length; i++) {
    const element = props.list[i];
    if(i<column){
      element.left = i*width;
      element.top = 20
      waterList.push(element)
      heightList.push(element.height)
    }
    else{
      let currentHeight = heightList[0];
      let index = 0;
      heightList.forEach((h,i)=>{
        if(currentHeight > h){
          currentHeight = h;
          index = i;
        }
      })
      console.log(currentHeight);
      

    }
  }
}

onMounted(()=>{
  init()
})
</script>

<style scoped lang="less">
.wraps{
  position: relative;
  .items{
    position: absolute;
    width: 120px;
  }
}

</style>